<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="../css/demo.css">
  <link rel="stylesheet" href="../css/iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>

      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1135564" target="_blank" class="nav-more">查看项目</a>

    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">

            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">附件</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">开发，代码</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">选中</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">右</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">系统菜单</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">部门管理</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">重复</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">首页 (2)</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">排行榜</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">其他</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">左</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">BBD盒子</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">任务管理</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">题库</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">折线图</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">一键取件</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">附件</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">维修记录</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">故障类型</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">点</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">特殊运维</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">无数据</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">结束拜访</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">人员管理</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">任务管理</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe783;</span>
                <div class="name">全部</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">回访</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">下 拉</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">进行时钟</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">收缩</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">库</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">任务</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">重复播放</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">上下</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">知识</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">AK-PJ满意</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">风险分析</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">排行榜</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">排行榜</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">离职</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">单次循环</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">维修</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">审批</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xeefa;</span>
                <div class="name">未选中</div>
                <div class="code-name">&amp;#xeefa;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xef00;</span>
                <div class="name">选中</div>
                <div class="code-name">&amp;#xef00;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">手指</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">单循环</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">奖杯</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">核心团队</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">回访</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe921;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe921;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe81b;</span>
                <div class="name">审批</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe812;</span>
                <div class="name">意见</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">157个人中心、我的</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">272条形图</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">题库</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">删 除</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">员工管理</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">用户名</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">管理</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">会议</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">基础数据管理</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">文件 拷贝</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">侧边栏巡检记录</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">学习监控</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">知识</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">工单</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">工单</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">绩效</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">箭头3_上</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">箭头3_下</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">订单管理</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>

          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon iconfont icon-fujian1"></span>
            <div class="name">
              附件
            </div>
            <div class="code-name">.icon-fujian1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-iconfontscan"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-iconfontscan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-iconfontcheck"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-iconfontcheck
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-kaifa"></span>
            <div class="name">
              开发，代码
            </div>
            <div class="code-name">.icon-kaifa
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xinzeng"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xuanzhong1"></span>
            <div class="name">
              选中
            </div>
            <div class="code-name">.icon-xuanzhong1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-you"></span>
            <div class="name">
              右
            </div>
            <div class="code-name">.icon-you
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xitongcaidan"></span>
            <div class="name">
              系统菜单
            </div>
            <div class="code-name">.icon-xitongcaidan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-bumenguanli"></span>
            <div class="name">
              部门管理
            </div>
            <div class="code-name">.icon-bumenguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhongfu"></span>
            <div class="name">
              重复
            </div>
            <div class="code-name">.icon-zhongfu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-iconfontgerenzhongxin"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-iconfontgerenzhongxin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-saoma"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-saoma
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shouye2"></span>
            <div class="name">
              首页 (2)
            </div>
            <div class="code-name">.icon-shouye2
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiaoxi1"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-you1"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-you1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-paixingbang"></span>
            <div class="name">
              排行榜
            </div>
            <div class="code-name">.icon-paixingbang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.icon-up
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.icon-shaixuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-qita"></span>
            <div class="name">
              其他
            </div>
            <div class="code-name">.icon-qita
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wode1"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-wode1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.icon-yuyin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zuo"></span>
            <div class="name">
              左
            </div>
            <div class="code-name">.icon-zuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-BBDhezi"></span>
            <div class="name">
              BBD盒子
            </div>
            <div class="code-name">.icon-BBDhezi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-kefujixiao"></span>
            <div class="name">
              任务管理
            </div>
            <div class="code-name">.icon-kefujixiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tiku"></span>
            <div class="name">
              题库
            </div>
            <div class="code-name">.icon-tiku
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhexiantu"></span>
            <div class="name">
              折线图
            </div>
            <div class="code-name">.icon-zhexiantu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-icon-test1"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-icon-test1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yijianqujian"></span>
            <div class="name">
              一键取件
            </div>
            <div class="code-name">.icon-yijianqujian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fujian"></span>
            <div class="name">
              附件
            </div>
            <div class="code-name">.icon-fujian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tongzhi1"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-weixiujilu"></span>
            <div class="name">
              维修记录
            </div>
            <div class="code-name">.icon-weixiujilu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guzhangleixing"></span>
            <div class="name">
              故障类型
            </div>
            <div class="code-name">.icon-guzhangleixing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dian"></span>
            <div class="name">
              点
            </div>
            <div class="code-name">.icon-dian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-computer_icon"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icon-computer_icon
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-special-oper"></span>
            <div class="name">
              特殊运维
            </div>
            <div class="code-name">.icon-special-oper
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiangmu1"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-xiangmu1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-yanzhengma
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wushuju"></span>
            <div class="name">
              无数据
            </div>
            <div class="code-name">.icon-wushuju
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jieshubaifang"></span>
            <div class="name">
              结束拜访
            </div>
            <div class="code-name">.icon-jieshubaifang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-renyuanguanli"></span>
            <div class="name">
              人员管理
            </div>
            <div class="code-name">.icon-renyuanguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-renwuguanli"></span>
            <div class="name">
              任务管理
            </div>
            <div class="code-name">.icon-renwuguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-quanbu"></span>
            <div class="name">
              全部
            </div>
            <div class="code-name">.icon-quanbu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fl-huifang"></span>
            <div class="name">
              回访
            </div>
            <div class="code-name">.icon-fl-huifang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiala"></span>
            <div class="name">
              下 拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-underway"></span>
            <div class="name">
              进行时钟
            </div>
            <div class="code-name">.icon-underway
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiangmu"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-xiangmu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shousuo"></span>
            <div class="name">
              收缩
            </div>
            <div class="code-name">.icon-shousuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-ku"></span>
            <div class="name">
              库
            </div>
            <div class="code-name">.icon-ku
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-task"></span>
            <div class="name">
              任务
            </div>
            <div class="code-name">.icon-task
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhongfubofang"></span>
            <div class="name">
              重复播放
            </div>
            <div class="code-name">.icon-zhongfubofang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shangxia"></span>
            <div class="name">
              上下
            </div>
            <div class="code-name">.icon-shangxia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-save"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-save
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhishi"></span>
            <div class="name">
              知识
            </div>
            <div class="code-name">.icon-zhishi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-naozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-naozhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-pj_manyi"></span>
            <div class="name">
              AK-PJ满意
            </div>
            <div class="code-name">.icon-pj_manyi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fengxianfenxi"></span>
            <div class="name">
              风险分析
            </div>
            <div class="code-name">.icon-fengxianfenxi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-diannao1"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icon-diannao1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-paihangbang"></span>
            <div class="name">
              排行榜
            </div>
            <div class="code-name">.icon-paihangbang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-paihangbang1"></span>
            <div class="name">
              排行榜
            </div>
            <div class="code-name">.icon-paihangbang1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-lizhi"></span>
            <div class="name">
              离职
            </div>
            <div class="code-name">.icon-lizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jia"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-jia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-onceloop"></span>
            <div class="name">
              单次循环
            </div>
            <div class="code-name">.icon-onceloop
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-repair"></span>
            <div class="name">
              维修
            </div>
            <div class="code-name">.icon-repair
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-Group-"></span>
            <div class="name">
              审批
            </div>
            <div class="code-name">.icon-Group-
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanbi1"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-weixuanzhong"></span>
            <div class="name">
              未选中
            </div>
            <div class="code-name">.icon-weixuanzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xuanzhong"></span>
            <div class="name">
              选中
            </div>
            <div class="code-name">.icon-xuanzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shouzhi3"></span>
            <div class="name">
              手指
            </div>
            <div class="code-name">.icon-shouzhi3
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-danxunhuan"></span>
            <div class="name">
              单循环
            </div>
            <div class="code-name">.icon-danxunhuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jiangbei"></span>
            <div class="name">
              奖杯
            </div>
            <div class="code-name">.icon-jiangbei
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-hexintuandui"></span>
            <div class="name">
              核心团队
            </div>
            <div class="code-name">.icon-hexintuandui
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-huifang"></span>
            <div class="name">
              回访
            </div>
            <div class="code-name">.icon-huifang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiugai"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shenpi"></span>
            <div class="name">
              审批
            </div>
            <div class="code-name">.icon-shenpi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yijian"></span>
            <div class="name">
              意见
            </div>
            <div class="code-name">.icon-yijian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxinwode"></span>
            <div class="name">
              157个人中心、我的
            </div>
            <div class="code-name">.icon-gerenzhongxinwode
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tiaoxingtu"></span>
            <div class="name">
              272条形图
            </div>
            <div class="code-name">.icon-tiaoxingtu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tiku2"></span>
            <div class="name">
              题库
            </div>
            <div class="code-name">.icon-tiku2
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dui1"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-dui1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删 除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yuangongguanli"></span>
            <div class="name">
              员工管理
            </div>
            <div class="code-name">.icon-yuangongguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yonghuming"></span>
            <div class="name">
              用户名
            </div>
            <div class="code-name">.icon-yonghuming
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiazai-"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai-
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanli"></span>
            <div class="name">
              管理
            </div>
            <div class="code-name">.icon-guanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-huiyi2"></span>
            <div class="name">
              会议
            </div>
            <div class="code-name">.icon-huiyi2
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jichushujuguanli"></span>
            <div class="name">
              基础数据管理
            </div>
            <div class="code-name">.icon-jichushujuguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wenjiankaobei"></span>
            <div class="name">
              文件 拷贝
            </div>
            <div class="code-name">.icon-wenjiankaobei
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-cebianlanxunjianjilu"></span>
            <div class="name">
              侧边栏巡检记录
            </div>
            <div class="code-name">.icon-cebianlanxunjianjilu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xuexijiankong"></span>
            <div class="name">
              学习监控
            </div>
            <div class="code-name">.icon-xuexijiankong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhishi1"></span>
            <div class="name">
              知识
            </div>
            <div class="code-name">.icon-zhishi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-gongdan"></span>
            <div class="name">
              工单
            </div>
            <div class="code-name">.icon-gongdan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-cedaohang-gongdan"></span>
            <div class="name">
              工单
            </div>
            <div class="code-name">.icon-cedaohang-gongdan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jixiao"></span>
            <div class="name">
              绩效
            </div>
            <div class="code-name">.icon-jixiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jiantoushang"></span>
            <div class="name">
              箭头3_上
            </div>
            <div class="code-name">.icon-jiantoushang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jiantouxia"></span>
            <div class="name">
              箭头3_下
            </div>
            <div class="code-name">.icon-jiantouxia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dingdanguanli"></span>
            <div class="name">
              订单管理
            </div>
            <div class="code-name">.icon-dingdanguanli
            </div>
          </li>

        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujian1"></use>
                </svg>
                <div class="name">附件</div>
                <div class="code-name">#icon-fujian1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontscan"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-iconfontscan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontcheck"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-iconfontcheck</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaifa"></use>
                </svg>
                <div class="name">开发，代码</div>
                <div class="code-name">#icon-kaifa</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong1"></use>
                </svg>
                <div class="name">选中</div>
                <div class="code-name">#icon-xuanzhong1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-you"></use>
                </svg>
                <div class="name">右</div>
                <div class="code-name">#icon-you</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongcaidan"></use>
                </svg>
                <div class="name">系统菜单</div>
                <div class="code-name">#icon-xitongcaidan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bumenguanli"></use>
                </svg>
                <div class="name">部门管理</div>
                <div class="code-name">#icon-bumenguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongfu"></use>
                </svg>
                <div class="name">重复</div>
                <div class="code-name">#icon-zhongfu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontgerenzhongxin"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-iconfontgerenzhongxin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icon-dianhua</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoma"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-saoma</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye2"></use>
                </svg>
                <div class="name">首页 (2)</div>
                <div class="code-name">#icon-shouye2</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi1"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-wode</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-you1"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-you1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paixingbang"></use>
                </svg>
                <div class="name">排行榜</div>
                <div class="code-name">#icon-paixingbang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-down</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#icon-up</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#icon-shaixuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qita"></use>
                </svg>
                <div class="name">其他</div>
                <div class="code-name">#icon-qita</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode1"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-wode1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#icon-yuyin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuo"></use>
                </svg>
                <div class="name">左</div>
                <div class="code-name">#icon-zuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-BBDhezi"></use>
                </svg>
                <div class="name">BBD盒子</div>
                <div class="code-name">#icon-BBDhezi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefujixiao"></use>
                </svg>
                <div class="name">任务管理</div>
                <div class="code-name">#icon-kefujixiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiku"></use>
                </svg>
                <div class="name">题库</div>
                <div class="code-name">#icon-tiku</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhexiantu"></use>
                </svg>
                <div class="name">折线图</div>
                <div class="code-name">#icon-zhexiantu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-icon-test1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijianqujian"></use>
                </svg>
                <div class="name">一键取件</div>
                <div class="code-name">#icon-yijianqujian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujian"></use>
                </svg>
                <div class="name">附件</div>
                <div class="code-name">#icon-fujian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-rili</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi1"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiujilu"></use>
                </svg>
                <div class="name">维修记录</div>
                <div class="code-name">#icon-weixiujilu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhangleixing"></use>
                </svg>
                <div class="name">故障类型</div>
                <div class="code-name">#icon-guzhangleixing</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dian"></use>
                </svg>
                <div class="name">点</div>
                <div class="code-name">#icon-dian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-computer_icon"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icon-computer_icon</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-special-oper"></use>
                </svg>
                <div class="name">特殊运维</div>
                <div class="code-name">#icon-special-oper</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu1"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-xiangmu1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#icon-yanzhengma</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wushuju"></use>
                </svg>
                <div class="name">无数据</div>
                <div class="code-name">#icon-wushuju</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jieshubaifang"></use>
                </svg>
                <div class="name">结束拜访</div>
                <div class="code-name">#icon-jieshubaifang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuanguanli"></use>
                </svg>
                <div class="name">人员管理</div>
                <div class="code-name">#icon-renyuanguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renwuguanli"></use>
                </svg>
                <div class="name">任务管理</div>
                <div class="code-name">#icon-renwuguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanbu"></use>
                </svg>
                <div class="name">全部</div>
                <div class="code-name">#icon-quanbu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fl-huifang"></use>
                </svg>
                <div class="name">回访</div>
                <div class="code-name">#icon-fl-huifang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下 拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-underway"></use>
                </svg>
                <div class="name">进行时钟</div>
                <div class="code-name">#icon-underway</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-xiangmu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shousuo"></use>
                </svg>
                <div class="name">收缩</div>
                <div class="code-name">#icon-shousuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ku"></use>
                </svg>
                <div class="name">库</div>
                <div class="code-name">#icon-ku</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-task"></use>
                </svg>
                <div class="name">任务</div>
                <div class="code-name">#icon-task</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongfubofang"></use>
                </svg>
                <div class="name">重复播放</div>
                <div class="code-name">#icon-zhongfubofang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangxia"></use>
                </svg>
                <div class="name">上下</div>
                <div class="code-name">#icon-shangxia</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-save</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhishi"></use>
                </svg>
                <div class="name">知识</div>
                <div class="code-name">#icon-zhishi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-naozhong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pj_manyi"></use>
                </svg>
                <div class="name">AK-PJ满意</div>
                <div class="code-name">#icon-pj_manyi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxianfenxi"></use>
                </svg>
                <div class="name">风险分析</div>
                <div class="code-name">#icon-fengxianfenxi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diannao1"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icon-diannao1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paihangbang"></use>
                </svg>
                <div class="name">排行榜</div>
                <div class="code-name">#icon-paihangbang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paihangbang1"></use>
                </svg>
                <div class="name">排行榜</div>
                <div class="code-name">#icon-paihangbang1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lizhi"></use>
                </svg>
                <div class="name">离职</div>
                <div class="code-name">#icon-lizhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jia"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-jia</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-onceloop"></use>
                </svg>
                <div class="name">单次循环</div>
                <div class="code-name">#icon-onceloop</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-repair"></use>
                </svg>
                <div class="name">维修</div>
                <div class="code-name">#icon-repair</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Group-"></use>
                </svg>
                <div class="name">审批</div>
                <div class="code-name">#icon-Group-</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi1"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixuanzhong"></use>
                </svg>
                <div class="name">未选中</div>
                <div class="code-name">#icon-weixuanzhong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong"></use>
                </svg>
                <div class="name">选中</div>
                <div class="code-name">#icon-xuanzhong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouzhi3"></use>
                </svg>
                <div class="name">手指</div>
                <div class="code-name">#icon-shouzhi3</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxunhuan"></use>
                </svg>
                <div class="name">单循环</div>
                <div class="code-name">#icon-danxunhuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiangbei"></use>
                </svg>
                <div class="name">奖杯</div>
                <div class="code-name">#icon-jiangbei</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hexintuandui"></use>
                </svg>
                <div class="name">核心团队</div>
                <div class="code-name">#icon-hexintuandui</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huifang"></use>
                </svg>
                <div class="name">回访</div>
                <div class="code-name">#icon-huifang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-xiugai</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenpi"></use>
                </svg>
                <div class="name">审批</div>
                <div class="code-name">#icon-shenpi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijian"></use>
                </svg>
                <div class="name">意见</div>
                <div class="code-name">#icon-yijian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxinwode"></use>
                </svg>
                <div class="name">157个人中心、我的</div>
                <div class="code-name">#icon-gerenzhongxinwode</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaoxingtu"></use>
                </svg>
                <div class="name">272条形图</div>
                <div class="code-name">#icon-tiaoxingtu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-icon-test</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiku2"></use>
                </svg>
                <div class="name">题库</div>
                <div class="code-name">#icon-tiku2</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dui1"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-dui1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删 除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangongguanli"></use>
                </svg>
                <div class="name">员工管理</div>
                <div class="code-name">#icon-yuangongguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuming"></use>
                </svg>
                <div class="name">用户名</div>
                <div class="code-name">#icon-yonghuming</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai-"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai-</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanli"></use>
                </svg>
                <div class="name">管理</div>
                <div class="code-name">#icon-guanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyi2"></use>
                </svg>
                <div class="name">会议</div>
                <div class="code-name">#icon-huiyi2</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichushujuguanli"></use>
                </svg>
                <div class="name">基础数据管理</div>
                <div class="code-name">#icon-jichushujuguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjiankaobei"></use>
                </svg>
                <div class="name">文件 拷贝</div>
                <div class="code-name">#icon-wenjiankaobei</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cebianlanxunjianjilu"></use>
                </svg>
                <div class="name">侧边栏巡检记录</div>
                <div class="code-name">#icon-cebianlanxunjianjilu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuexijiankong"></use>
                </svg>
                <div class="name">学习监控</div>
                <div class="code-name">#icon-xuexijiankong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhishi1"></use>
                </svg>
                <div class="name">知识</div>
                <div class="code-name">#icon-zhishi1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongdan"></use>
                </svg>
                <div class="name">工单</div>
                <div class="code-name">#icon-gongdan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cedaohang-gongdan"></use>
                </svg>
                <div class="name">工单</div>
                <div class="code-name">#icon-cedaohang-gongdan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jixiao"></use>
                </svg>
                <div class="name">绩效</div>
                <div class="code-name">#icon-jixiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantoushang"></use>
                </svg>
                <div class="name">箭头3_上</div>
                <div class="code-name">#icon-jiantoushang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantouxia"></use>
                </svg>
                <div class="name">箭头3_下</div>
                <div class="code-name">#icon-jiantouxia</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdanguanli"></use>
                </svg>
                <div class="name">订单管理</div>
                <div class="code-name">#icon-dingdanguanli</div>
            </li>

          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
